<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 
			 ；练习：1 原型 2.正三角形
					
			 */
			div#circle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
					/* 边框阴影 box-shadow 属性 */
					box-shadow: 5px 5px 50px 5px red;
			}		
			/* 	 思路1：宽高与边框倒角一致
			 思路2：div#d1       css中：抓到div  【斜线】
			                    左边框：50像素实线红色
			                    右边框：50像素实线黄色
			                    下边框：50像素实线黑色
				注意：先别加宽高   transparent 透明色	 */
				div#triangle{
					width: 0;
					/* border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid black; */
					/* 两行：倒三角，蓝色，透明度 .3
					   提醒：所有边框：50px solid transparemt
					         上边颜色改成蓝色 0，0，255
					 */
					border: 50px solid transparent;
					border-top-color: rgba(0,0,255,.3);
				}
				/* outline 边框轮廓  只针对input 元素 */
			    input{
					outline: 0.1px solid red;
				}
				/* 实际应用：通配选择器 去掉轮廓 
				  {outline 0;}
				
				*/
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text" />
	</body>
</html>